<template>
  <view class="search-blog-container">
    <!-- search模块 -->
    <view class="search-bar-box">
      <my-search
        :isShowInput="true"
        :placeholderText="defaultText"
        v-model="searchVal"
        :config="{
          backgroundColor: '#f1f0f3',
        }"
        @search="onSearchConfirm"
        @focus="onSearchFocus"
        @blur="onSearchBlur"
        @cancel="onSearchCancel"
        @clear="onSearchClear"
      ></my-search>
    </view>
    <!-- 热搜列表 -->
    <view class="search-hot-list-box card" v-if="showType === HOT_LIST">
      <search-hot-list @onSearch="onSearchConfirm"></search-hot-list>
    </view>
    <!-- 热搜历史 -->
    <view class="search-history-box" v-else-if="showType === SEARCH_HISTORY">
      <search-history @onSearch="onSearchConfirm"></search-history>
    </view>
    <!-- 热搜结果 -->
    <view class="search-result-list-box" v-else-if="showType === SEARCH_RESULT">
      <!-- 1.给 mescroll-body组件添加 ref=mescrollItem   固定的-->
      <search-result-list
        :queryStr="searchVal"
        ref="mescrollItem"
      ></search-result-list>
    </view>
  </view>
</template>

<script>
import { getDefaultText } from "api/search";
import { mapMutations, mapState } from "vuex";
// 2. 引入mescroll-comp.js
import MescrollCompMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js";
// 热搜列表
const HOT_LIST = "0";
// 搜索历史
const SEARCH_HISTORY = "1";
// 热搜结果
const SEARCH_RESULT = "2";
export default {
  mixins: [MescrollCompMixin],
  data() {
    return {
      // 输入框中的内容
      searchVal: "",
      // 默认的placeholderText
      defaultText: "默认的placeholderText",
      // 默认清空下 || 点击了输入框的取消按钮时，显示热搜列表
      // searchBar获取焦点时 || 点击输入框清空按钮时，显示搜索历史
      // 当用户点击热搜列表item || 用户点击搜索历史item || 用户按下搜索键，显示 搜索结果
      HOT_LIST,
      SEARCH_HISTORY,
      SEARCH_RESULT,
      showType: HOT_LIST,
    };
  },
  methods: {
    ...mapMutations("search", ["addSearchData"]),
    /**
     * 推荐搜索文本
     */
    async loadDefaultText() {
      const { data: res } = await getDefaultText();
      this.defaultText = res.defaultText;
    },
    /**
     * 搜索内容
     */
    onSearchConfirm(val) {
      // 当用户进行输入时，如果输入包含的内容，展示搜索结果
      // 假如 val不存在，使用placeholder进行搜索
      this.searchVal = val ? val : this.defaultText;
      // 保存历史数据的方法
      this.addSearchData(this.searchVal);
      if (this.searchVal) {
        this.showType = SEARCH_RESULT;
      }
    },
    // searchbar 获取焦点
    onSearchFocus(val) {
      this.showType = SEARCH_HISTORY;
    },
    /**
     * searchbar 失去焦点
     */
    onSearchBlur(val) {},
    /**
     * searchbar 清空内容
     */
    onSearchClear() {
      this.showType = SEARCH_HISTORY;
    },
    /**
     * searchbar 取消按钮
     */
    onSearchCancel(val) {
      this.showType = HOT_LIST;
    },
  },
  created() {
    this.loadDefaultText();
  },
  computed: {
    ...mapState("search", ["searchData"]),
  },
};
</script>

<style lang="scss" scoped>
.search-blog-container {
  .search-bar-box {
    background-color: #fff;
    padding: 5px;
    position: sticky;
    top: 0;
    z-index: 9;
  }
}
</style>
